<template>
  <div class="updown">
    <!-- 上下查 弹窗 -->
    <el-dialog
      v-dialogDrag
      :title="$t('market.topDownCha')"
      :visible.sync="isclientlDialog"
      width="80%"
      top="5vh"
      :before-close="handleClose"
    >
      <div class="mainPage">
        <div class="left-mainPage">
          <el-tree
            node-key="fid"
            :data="materialGroup"
            :props="defaultProps"
            :default-expanded-keys="[0]"
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
        <div class="right-mainPage">
          <marketOrder v-if="isType === 0" :list="listData" />
          <deliveryReleaseList v-if="isType === 1" :list="listData" />
          <outBankList v-if="isType === 2" :list="listData" />
          <saleRetuenList v-if="isType === 3" :list="listData" />
          <applyList v-if="isType === 4" :list="listData" />
          <purchaseOrderList v-if="isType === 5" :list="listData" />
          <storageList v-if="isType === 6" :list="listData" />
          <returnMaterList v-if="isType === 7" :list="listData" />
          <proOrderList v-if="isType === 8" :list="listData" />
          <ingredientList v-if="isType === 9" :list="listData" />
          <pickingList v-if="isType === 10" :list="listData" />
          <proSupplement v-if="isType === 11" :list="listData" />
          <supplementaryList v-if="isType === 12" :list="listData" />
          <proStirageList v-if="isType === 13" :list="listData" />
          <outOrderList v-if="isType === 14" :list="listData" />
          <outsourceList v-if="isType === 15" :list="listData" />
          <outsource v-if="isType === 16" :list="listData" />
          <outSupplementaryList v-if="isType === 17" :list="listData" />
          <receivableList v-if="isType === 18" :list="listData" />
          <billsPayable v-if="isType === 19" :list="listData" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryDownList } from '@/api/marketManage/marketOrder'
export default {
  components: {
    marketOrder: () => import('@/views/market/marketManage/marketOrder'),
    deliveryReleaseList: () => import('@/views/market/deliveryRelease/deliveryReleaseList'),
    outBankList: () => import('@/views/market/marketOutBank/outBankList'),
    saleRetuenList: () => import('@/views/market/salesReturn/saleRetuenList'),
    applyList: () => import('@/views/purchasing/apply/applyList'),
    purchaseOrderList: () => import('@/views/purchasing/purchaseOrder/purchaseOrderList'),
    storageList: () => import('@/views/purchasing/putStorage/storageList'),
    returnMaterList: () => import('@/views/purchasing/returnMaterial/returnMaterList'),
    proOrderList: () => import('@/views/production/collect/proOrderList'),
    ingredientList: () => import('@/views/production/collect/ingredientList'),
    pickingList: () => import('@/views/production/collect/pickingList'),
    proSupplement: () => import('@/views/production/collect/proSupplement'),
    supplementaryList: () => import('@/views/production/collect/supplementaryList'),
    proStirageList: () => import('@/views/production/collect/proStirageList'),
    outOrderList: () => import('@/views/production/productionPicking/outOrderList'),
    outsourceList: () => import('@/views/production/productionPicking/outsourceList'),
    outsource: () => import('@/views/production/productionPicking/outsource'),
    outSupplementaryList: () => import('@/views/production/productionPicking/outSupplementaryList'),
    receivableList: () => import('@/views/financial/cashier/receivable/receivableList'),
    billsPayable: () => import('@/views/financial/cashier/payable/billsPayable')
  },
  props: {
    msg: {
      type: [String, Number],
      default: ''
    },
    fentryid: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      listData: [],
      isType: -1,
      materialGroup: [{
        fname: '全部',
        fid: 0,
        details: []
      }],
      defaultProps: {
        children: 'details',
        label: 'fname'
      },
      isclientlDialog: true
    }
  },
  created() {
    this.queryTBdCustomerList()
  },
  methods: {
    // 树形筛选
    async handleNodeClick(data) {
      this.listData = data.list
      switch (data.pathurl) {
        case '/marketOrder': // 销售
          this.isType = 0
          break
        case '/deliveryReleaseList': // 发货通知
          this.isType = 1
          break
        case '/outBankList': // 销售出库
          this.isType = 2
          break
        case '/saleRetuenList': // 销售退库
          this.isType = 3
          break
        case '/applyList': // 采购申请
          this.isType = 4
          break
        case '/purchaseOrderList': // 采购订单
          this.isType = 5
          break
        case '/storageList': // 采购入库
          this.isType = 6
          break
        case '/returnMaterList': // 采购退库
          this.isType = 7
          break
        case '/proOrderList': // 生产订单
          this.isType = 8
          break
        case '/ingredientList': // 生产用料单
          this.isType = 9
          break
        case '/pickingList': // 生产领料单
          this.isType = 10
          break
        case '/proSupplement': // 生产退料单
          this.isType = 11
          break
        case '/supplementaryList': // 生产补料单
          this.isType = 12
          break
        case '/proStirageList': // 生产入库单
          this.isType = 13
          break
        case '/outOrderList': // 委外订单
          this.isType = 14
          break
        case '/outsourceList': // 委外用料单
          this.isType = 15
          break
        case '/outsource': // 委外领料
          this.isType = 16
          break
        case '/outSupplementaryList': // 委外补料单
          this.isType = 17
          break
        case '/receivableList': // 应收单
          this.isType = 18
          break
        case '/billsPayable': // 应付单
          this.isType = 19
          break
      }
    },
    // 获取上下查列表
    async queryTBdCustomerList() {
      this.isclientlDialog = true
      const DATA = {
        cha: this.msg,
        list: this.fentryid
      }
      const { data: RES } = await queryDownList(DATA)
      this.materialGroup[0].details = RES
    },
    // 关闭前回调
    handleClose() {
      this.$emit('client')
    }
  }
}
</script>

<style scoped lang="scss">
.updown {
  @include listBom;
  &::v-deep .el-dialog .el-dialog__body {
    max-height: 90vh;
    overflow: auto;
  }
  .mainPage {
    margin-top: 0.6vh;
    display: flex;
    flex-direction: row;

    .left-mainPage {
      width: 12%;
      height: calc(100vh - 220px);
      overflow: auto;
      display: flex;
      flex-direction: column;
      border: 1px solid #ccc;
      &::-webkit-scrollbar-track-piece {
        background: #fff;
      }

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #eee;
        border-radius: 20px;
      }
    }
    .right-mainPage {
      width: 88%;
      margin-left: 10px;
    }
  }
}
</style>
